<template>
	<zq-page>
		<zq-navbar v-model="scrollTop" :props="{'navbarTitle':'气泡按钮'}"></zq-navbar>
		<view class="flex_row flex_wrap">
			<zq-button color="red" margin="20rpx 0 0 20rpx">red</zq-button>
			<zq-button color="orange" margin="20rpx 0 0 20rpx">orange</zq-button>
			<zq-button color="yellow" margin="20rpx 0 0 20rpx">yellow</zq-button>
			<zq-button color="green" margin="20rpx 0 0 20rpx">green</zq-button>
			<zq-button color="blue" margin="20rpx 0 0 20rpx">blue</zq-button>
			<zq-button color="cyan" margin="20rpx 0 0 20rpx">cyan</zq-button>
			<zq-button color="violet" margin="20rpx 0 0 20rpx">violet</zq-button>
		
			<zq-button color="pink" margin="20rpx 0 0 20rpx">pink</zq-button>
			<zq-button color="gray" margin="20rpx 0 0 20rpx">gray</zq-button>
			<zq-button color="black" margin="20rpx 0 0 20rpx">black</zq-button>
			<zq-button margin="20rpx 0 0 20rpx">默认色</zq-button>
			<zq-button margin="20rpx 0 0 20rpx" :props="{showBoxShadow:false}">无阴影</zq-button>
			<zq-button margin="20rpx 0 0 20rpx" :props="{boxShadow:'0 0 50rpx green'}">自定义外阴影</zq-button>
			<zq-button margin="20rpx 0 0 20rpx" :props="{insetShadow:50}">内阴影宽度</zq-button>
			<zq-button margin="20rpx 0 0 20rpx" :props="{color:'black',fontSize:20}">字体大小颜色</zq-button>
			<zq-button margin="20rpx 0 0 20rpx" :props="{interval:15}">气泡边隙</zq-button>
			<zq-button margin="20rpx 0 0 20rpx" :props="{borderRadius:'0 30rpx 0 30rpx'}">自定义圆角</zq-button>
			<zq-button margin="20rpx 0 0 20rpx" :props="{width:250,height:80}">自定义宽高</zq-button>
		</view>
	</zq-page>
</template>

<script>
	export default{
		data(){
			return{
				scrollTop:0
			}
		}
	}
</script>

<style>
</style>
